<template>
	<view class="manage-view">
		<view class="top">
			<uni-icons style="margin-left: 25rpx;" type="left" size="30" color="#9f9f9f" @click="toBackPage">
			</uni-icons>
			<view class="input">团队管理</view>
		</view>

		<view class="content">

			<view class="content-title">
				负责人
			</view>

			<view class="monitor" v-if="teamInfo.monitor != null">
				<view class="avatar">
					<image mode="aspectFill" :src="teamInfo.monitor.userInfo.avatar"></image>
				</view>
				<view class="nickname">{{teamInfo.monitor.userInfo.nickname}}</view>
				<view class="score">{{teamInfo.monitor.hulaScore}}</view>
			</view>

			<view class="content-title">
				共创者
			</view>

			<view class="participants">
				<view class="participant" v-for="participant in teamInfo.participants">
					<view class="avatar">
						<image mode="aspectFill" :src="participant.userInfo.avatar"></image>
					</view>
					<view class="nickname">{{participant.userInfo.nickname}}</view>
					<view class="score">{{participant.hulaScore}}</view>
					<view class="button">操作</view>
				</view>
			</view>

			<view class="content-title">
				近期待办
			</view>

			<view class="todos">
				<view class="todo" @tap="toEditTodo(item.id)" @longpress="deleteTeamTodo(item.id)" :data-index="index"
					v-for="(item, index) in todoList" :key="item.id">
					<view class="todo-card" :style="'background-color: ' + (item.teamTodoId == null ? '' : 'rgb(212,234,253)') + ';'">
						<view class="todo-check" @click="finishOrCoverTodo(item.id,index)">
							<uni-icons v-if="item.status == 1" type="checkmarkempty" size="20" color="#9a9a9a"></uni-icons>
						</view>

						<view class="todo-info" style="width: 100%">
							<view class="todo-title">{{ item.title }}</view>
							<view
								style="display: flex; flex-direction: column; justify-content: space-between; margin-top: 8rpx">
								<view class="todo-brief" v-if="item.gmtEnd != null">
									截止时间：{{ item.gmtEnd ? gmtToDate(item.gmtEnd) : '无截止日期' }}</view>
								<view class="todo-brief" v-if="item.monitorId != null">负责人：{{ item.monitorName}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="page-btns">
			<view class="button">
				<uni-icons @click="toEditTodo" type="plusempty" size="30" color="#5DACB1"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	let movedistance = 0;
	export default {
		data() {
			return {
				teamInfo: {},

				currentIndex: '',
				animation: '',
				todoList: [{
						id: "1",
						title: "团队待办",
						gmtEnd: "",
						monitorId: "",
						monitorName: "带着脑子去流浪"
					},
					{
						id: "2",
						title: "团队待办",
						gmtEnd: "",
						monitorId: "",
						monitorName: "带着脑子去流浪"
					}
				],
			}
		},
		onLoad(options) {
			if (options.teamId) {
				this.teamInfo.id = options.teamId
				this.getTeamManageInfo()
				this.getTeamTodoList()
			}
		},
		methods: {
			getTeamManageInfo() {
				this.$api.getTeamManageInfo({
					id: this.teamInfo.id
				}).then(res => {
					this.teamInfo = res.data
				})
			},


			toEditTodo(id) {
				if (id == null) {
					uni.navigateTo({
						url: "/pages_self/wind/manage/team/team-todo-edit?teamId=" + this.teamInfo.id
					})
				} else {
					uni.navigateTo({
						url: "/pages_self/wind/manage/team/team-todo-edit?teamTodoId=" + id + "&teamId=" +
							this.teamInfo.id
					})
				}
			},








			// 获取团队待办
			getTeamTodoList: function() {
				this.$api.getTeamTodoList({
					teamId: this.teamInfo.id
				}).then(res => {
					this.todoList = res.data
				})
			},

			// 新增团队待办
			addTeamTodo: function(e) {
				console.log(this.dateTime, this.startYear);
				let todoDateTime = dateTimePicker.dateTimeToDateString(this.dateTime, this.startYear);
				console.log(todoDateTime);
				this.todoInput.gmtEnd = todoDateTime

				this.$api.addTeamTodo(this.todoInput).then(res => {
					uni.showToast({
						title: '新建成功',
						icon: '',
						duration: 500
					});
					this.getTeamTodoList();
					this.getTeamManageInfo(); // 团队信息会也改变
				})
			},

			// 修改团队待办
			updateTeamTodo: async function() {
				let todoDateTime = dateTimePicker.dateTimeToDateString(this.dateTime, this.startYear);
				this.$api.updateTeamTodo({
					date: todoDateTime,
					title: this.todoTitle,
					id: this.todoId
				}).then(res => {
					uni.showToast({
						title: '修改成功',
						icon: '',
						duration: 500
					});
					this.getTeamTodoList();
				})
			},

			// 删除团队待办
			deleteTeamTodo: function(todoId) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除该团队待办？',
					success(res) {
						if (res.confirm) {
							that.$api.deleteTeamTodo({
								todoId
							}).then(res => {
								uni.showToast({
									title: '删除成功',
									icon: '',
									duration: 500
								});
								that.getTeamTodoList();
								// 滑动样式回归
								that.slideAnimation(0, 500);
							})
						}
					}
				});
			},


			// 解散团队
			deleteTeam: function(e) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否解散该团队？',
					success(res) {
						if (res.confirm) {
							that.$api.deleteTeam({
								id: that.teamInfo.id
							}).then(res => {
								uni.showToast({
									title: '解散成功',
									icon: '',
									duration: 500
								});
								setTimeout(() => {
									uni.navigateBack()
								}, 1000);
							})
						}
					}
				});
			},


			// 修改团队信息
			updateTeam: function() {
				this.$api.updateTeam(this.teamInfoInput).then(res => {
					uni.showToast({
						title: '修改成功',
						icon: '',
						duration: 500
					});
					this.getTeamManageInfo();
				})
			},


			touchstartX(e) {
				this.currentIndex = e.currentTarget.dataset.index // 获取触摸X坐标

				this.recordX = e.touches[0].clientX;
			},
			touchmoveX(e) {
				let currentX = e.touches[0].clientX;
				movedistance = currentX - this.recordX; // 获取移动距离

				if (movedistance > 0) {
					return;
				}

				if (movedistance < 0 && movedistance > -15) {
					return;
				}

				this.slideAnimation(movedistance, 20);
			},
			resetX() {
				this.slideAnimation(0, 200);
			},
			touchendX() {
				let recordX;

				if (movedistance <= -50) {
					recordX = -220;
				} else if (movedistance >= -50) {
					recordX = 0;
				}

				this.slideAnimation(recordX, 200);
			},
			slideAnimation(recordX, time) {
				let animation = uni.createAnimation({
					duration: time,
					timingFunction: 'ease'
				});
				animation.translate(recordX + 'rpx', 0).step();
				this.animation = animation.export()
			},



			toBackPage() {
				uni.navigateBack()
			},
			
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			}
		}
	}
</script>

<style scoped lang="scss">
	.manage-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 80rpx;

		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			padding: 20rpx 0;

			background-color: white;
			border-bottom: solid thin #efefef;


			.input {
				width: 450rpx;
				padding-left: 30rpx;
			}


		}


		.content {
			display: flex;
			flex-direction: column;
			width: 100%;

			.content-title {
				margin-left: 30rpx;
				margin-top: 30rpx;
				font-weight: bold;
			}

			.monitor {
				width: 630rpx;
				margin-left: 30rpx;
				margin-top: 30rpx;
				padding: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				background-color: #FFFFFF;
				box-shadow: 0px 0px 4px 2px #f5f7f5;

				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.nickname {
					width: 370rpx;
				}

				.score {
					width: 160rpx;
				}

			}

			.participants {
				display: flex;
				flex-direction: column;

				.participant {
					width: 630rpx;
					margin-left: 30rpx;
					margin-top: 30rpx;
					padding: 30rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					background-color: #FFFFFF;
					box-shadow: 0px 0px 4px 2px #f5f7f5;

					.avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.nickname {
						width: 370rpx;
					}

					.score {
						width: 80rpx;
					}

					.button {
						width: 80rpx;
					}

				}

			}
			
			.todos{
				display: flex;
				flex-direction: column;
				align-items: center;
				z-index: 2;
				width: 670rpx;
				margin-left: 40rpx;
				margin-top: 30rpx;
				
				.todo {
				
					width: 690rpx;
					box-shadow: 0px 0px 4px 2px #f5f7f5;
					padding: 20rpx 0;
					background-color: #FFFFFF;
					margin-bottom: 30rpx;
				
				
					.todo-card {
						display: flex;
						align-items: center;
				
				
						.todo-check {
							height: 40rpx;
							width: 45rpx;
							border: solid thin #636363;
							border-radius: 10rpx;
							margin-left: 30rpx;
							margin-right: 30rpx;
						
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
						}
				
						.todo-info {
							display: block;
						}
				
						.todo-title {
							font-size: 32rpx;
						}
				
						.todo-brief {
							font-size: 24rpx;
							color: gray
						}
				
						/* 待办滑动操作按钮 */
						.todo-btns {
							position: absolute;
							right: -310rpx;
				
							display: flex;
							justify-content: left;
							align-items: center;
				
							box-sizing: border-box;
							width: 300rpx;
							height: 120rpx;
							padding-left: 40rpx;
				
							text-align: center;
							color: #fff;
							line-height: 120rpx;
						}
				
						.todo-btns view {
							width: 80rpx;
							height: 120rpx;
							font-size: 28rpx;
							margin-right: 20rpx;
							border-radius: 10rpx;
						}
				
						.todo-btns .detail {
							background-color: #97C5FC;
						}
					}
				
					.todo-btns .delete {
						background-color: #f10e0e;
					}
				}
			}


		}


		.modal-box {
			width: 600rpx;
			margin-left: 35rpx;
			margin-bottom: 200rpx;


			padding: 40rpx;
			border-radius: 20rpx;
			background: white;

			display: flex;
			flex-direction: column;
			justify-content: space-between;

			text-align: left;


			.modal-title {
				margin-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: 600;
				text-align: center;
			}

			.modal-main {
				width: 100%;
				font-size: 26rpx;
				margin: 20rpx 0 40rpx;


				.modal-main-item {
					width: 100%;
					margin-bottom: 30rpx;

					.modal-key {
						display: block;

						font-size: 32rpx;
						margin-bottom: 10rpx;
					}

					/* 模态框单项：多选标签 */
					.modal-tags {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						min-height: 80rpx;
					}

					.modal-tag {
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						margin: 0 20rpx 10rpx 0;
						background-color: rgb(231, 240, 247);
					}

					.chosen-tag {
						background: darkorange;
					}

				}

				.modal input,
				.modal .picker-input {
					box-sizing: border-box;
					margin: 10rpx 0;
					width: 100%;
					height: 60rpx;
					border-radius: 20rpx;
					padding: 0 20rpx;
					background-color: aliceblue;

					line-height: 60rpx;
				}

			}

			.modal-operations {
				display: flex;
				justify-content: space-around;
				width: 100%;
				margin-top: 20rpx;

				text-align: center;
			}

			.modal-operations>view {
				font-weight: 600;
				padding: 10rpx;
				border-radius: 4rpx;

				width: 40%;
			}

		}


		.page-btns {
			display: flex;
			position: fixed;
			right: 100rpx;
			bottom: 150rpx;
			z-index: 10;


			.button {
				width: 90rpx;
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: solid #5DACB1;
				background-color: #FFFFFF;
				border-radius: 50rpx;
				color: white;
			}
		}


		image {
			height: 100%;
			width: 100%;
		}
	}
</style>
